<template>
  <div>
    <!-- 目录侧边栏 -->
    <el-row>
      <el-col :span="2" offset="1" style="line-height: 10px">
        <span
          @click="drawer = true"
          plain
          type="primary"
          style="margin-left: 35px; font-size: 22px"
        >
          <div class="el-icon-s-unfold">目录</div>
        </span>
      </el-col>
      <el-col :span="3" offset="16" style="line-height: 10px">
        <!-- 从服务器端搜索数据 -->
        <el-autocomplete
          v-model="state"
          :fetch-suggestions="querySearchAsync"
          placeholder="请输入内容"
          @select="handleSelect"
        ></el-autocomplete>
      </el-col>
    </el-row>

    <el-drawer
      title="请选择商品种类"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <!-- 商品分类菜单 -->
      <div class="block">
        <span class="demonstration"></span>
        <el-cascader
          v-model="value"
          :options="options"
          :props="{ expandTrigger: 'hover' }"
          @change="handleChange"
        ></el-cascader>
      </div>
    </el-drawer>

    <el-row style="line-height: 30px">
      <el-col :span="24">
        <el-image
          src="https://www.hermes.cn/sites/all/themes/custom/hermes/img/hermes-logo.svg"
        ></el-image>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="20" offset="2"> </el-col>
      <el-col :span="2"></el-col>
    </el-row>
    <el-row style="line-height: 30px">
      <el-col :span="24">
        <p class="titlefontstyle">男士风采</p>
        <p style="font-weight: lighter">
          率性洒脱、轻盈感性：成熟男士系列暗藏玄机。
        </p>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="18" offset="3">
        <div class="demo-image__lazy">
          <el-image
            src="https://assets.hermes.cn/is/image/hermesedito/P_169_BIG_PARIS_MOMENT_STILL1?fit=wrap%2C0&wid=1920"
          ></el-image>
        </div>
      </el-col>
      <el-col :span="3"></el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <p
          class="titlefontstyle"
          style="font-weight: lighter; line-height: 90px"
        >
          匠心之作
        </p>
      </el-col>
    </el-row>
    <!-- 第一行商品 -->
    <el-row> 
      <el-col :span="5" offset="1" style="line-height: 50px"  v-for="(goodType,index) in GoodTypesList" :key="index">
        <!-- 路由跳转，顺带上商品类别id -->
        <router-link :to="{name:'GoodsDetails',params:{id:goodType.id,typeName:goodType.name}}">
          <img style="width: 250px; height: 250px" :src="require(`./image/${goodType.timg}.jpg`)"/>
        </router-link>
        <p style="line-height: 0px">{{goodType.name}}</p>
      </el-col>
    </el-row>

    <div style="width: 100%; height: 100px"></div>

    <el-row>
      <el-col :span="20" offset="2" class="firstRadio">
        <p class="titlefontstyle" style="line-height: 74px">午后小憩</p>
        <p style="line-height: 14px; font-weight: lighter">
          几分钟足矣。她躺在草地上，脚踏木底鞋，书本已合上。小兔等待着，她醒来的时刻。
        </p>
        <el-image
          src="https://assets.hermes.cn/is/image/hermesedito/P_169_SELLIER_FW22_COVER_NAP?fit=wrap%2C0&wid=923"
        ></el-image>
      </el-col>
      <el-col :span="2"></el-col>
    </el-row>


<div style="width: 100%; height: 50px"></div>

    <el-row>
      <el-col :span="24">
        <p
          class="titlefontstyle"
          style="font-weight: lighter; line-height: 90px"
        >
          另辟蹊径
        </p>
      </el-col>
    </el-row>
    <!-- 第一行商品 -->

    
  </div>
</template>

<script>
export default {
  
  data() {
    return {
      
      isCollapse: true,
      drawer: false,
      direction: "ltr",
      // 搜索框
      restaurants: [],
      state: "",
      timeout: null,
      //菜单数据
      value: [],
      options: [

        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                },
                {
                  value: "kekong",
                  label: "可控",
                },
              ],
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航",
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                },
              ],
            },
          ],
        },
        {
          value: "zujian",
          label: "组件",
          children: [
            {
              value: "basic",
              label: "Basic",
              children: [
                {
                  value: "layout",
                  label: "Layout 布局",
                },
                {
                  value: "color",
                  label: "Color 色彩",
                },
                {
                  value: "typography",
                  label: "Typography 字体",
                },
                {
                  value: "icon",
                  label: "Icon 图标",
                },
                {
                  value: "button",
                  label: "Button 按钮",
                },
              ],
            },
            {
              value: "form",
              label: "Form",
              children: [
                {
                  value: "radio",
                  label: "Radio 单选框",
                },
                {
                  value: "checkbox",
                  label: "Checkbox 多选框",
                },
                {
                  value: "input",
                  label: "Input 输入框",
                },
                {
                  value: "input-number",
                  label: "InputNumber 计数器",
                },
                {
                  value: "select",
                  label: "Select 选择器",
                },
                {
                  value: "cascader",
                  label: "Cascader 级联选择器",
                },
                {
                  value: "switch",
                  label: "Switch 开关",
                },
                {
                  value: "slider",
                  label: "Slider 滑块",
                },
                {
                  value: "time-picker",
                  label: "TimePicker 时间选择器",
                },
                {
                  value: "date-picker",
                  label: "DatePicker 日期选择器",
                },
                {
                  value: "datetime-picker",
                  label: "DateTimePicker 日期时间选择器",
                },
                {
                  value: "upload",
                  label: "Upload 上传",
                },
                {
                  value: "rate",
                  label: "Rate 评分",
                },
                {
                  value: "form",
                  label: "Form 表单",
                },
              ],
            },
            {
              value: "data",
              label: "Data",
              children: [
                {
                  value: "table",
                  label: "Table 表格",
                },
                {
                  value: "tag",
                  label: "Tag 标签",
                },
                {
                  value: "progress",
                  label: "Progress 进度条",
                },
                {
                  value: "tree",
                  label: "Tree 树形控件",
                },
                {
                  value: "pagination",
                  label: "Pagination 分页",
                },
                {
                  value: "badge",
                  label: "Badge 标记",
                },
              ],
            },
            {
              value: "notice",
              label: "Notice",
              children: [
                {
                  value: "alert",
                  label: "Alert 警告",
                },
                {
                  value: "loading",
                  label: "Loading 加载",
                },
                {
                  value: "message",
                  label: "Message 消息提示",
                },
                {
                  value: "message-box",
                  label: "MessageBox 弹框",
                },
                {
                  value: "notification",
                  label: "Notification 通知",
                },
              ],
            },
            {
              value: "navigation",
              label: "Navigation",
              children: [
                {
                  value: "menu",
                  label: "NavMenu 导航菜单",
                },
                {
                  value: "tabs",
                  label: "Tabs 标签页",
                },
                {
                  value: "breadcrumb",
                  label: "Breadcrumb 面包屑",
                },
                {
                  value: "dropdown",
                  label: "Dropdown 下拉菜单",
                },
                {
                  value: "steps",
                  label: "Steps 步骤条",
                },
              ],
            },
            {
              value: "others",
              label: "Others",
              children: [
                {
                  value: "dialog",
                  label: "Dialog 对话框",
                },
                {
                  value: "tooltip",
                  label: "Tooltip 文字提示",
                },
                {
                  value: "popover",
                  label: "Popover 弹出框",
                },
                {
                  value: "card",
                  label: "Card 卡片",
                },
                {
                  value: "carousel",
                  label: "Carousel 走马灯",
                },
                {
                  value: "collapse",
                  label: "Collapse 折叠面板",
                },
              ],
            },
          ],
        },
        {
          value: "ziyuan",
          label: "资源",
          children: [
            {
              value: "axure",
              label: "Axure Components",
            },
            {
              value: "sketch",
              label: "Sketch Templates",
            },
            {
              value: "jiaohu",
              label: "组件交互文档",
            },
          ],
        },
      ],

      //商品类别展示
      GoodTypesList: [],
      typeId: ""
    };
  },
  created() {

    this.getGoodTypesList()

  },
  methods: {

    
    //获取商品类别以及图片
    getGoodTypesList(){
      this.axios.get("http://localhost:8080/goodsType/list").then(response=>{

        console.log(response)

        this.GoodTypesList = response.data.data.goodsTypeList

        console.log(this.GoodTypesList)

      })
    },

    //菜单列表改变选项
    handleChange(value) {
      console.log(value);
    },
    //目录打开和关闭方法
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    //目录侧边栏取消
    handleClose(done) {
      done();
    },
    handleClick() {
      console.log(this.activeName);
      this.getGoodsListById()
    },

    

  },
};
</script>

<style>
.demo-image__lazy .el-image {
  display: block;
  min-height: 200px;
  margin-bottom: 10px;
}
.firstRadio {
  background-color: rgb(248, 249, 249);
}
.titlefontstyle {
  font-size: 33px;
  font-weight: lighter;
}
</style>